<template>
  <el-tabs v-model="activeName" style="padding: 30px;" @tab-click="handleClick">
    <el-tab-pane label="角色管理" name="first">
      <el-button style="margin-bottom: 30px;" type="primary" size="mini" @click="addSet">新增角色</el-button>
      <el-table
        border
        stripe
        :data="tableData"
      >
        <!-- style="width: 100%; text-align: center;" -->
        <el-table-column type="index" :index="index" label="序号" width="120" />
        <el-table-column property="name" label="角色"  width="220" />
        <el-table-column property="description" label="描述" />
        <el-table-column label="操作">
          <template slot-scope="scope">
             <el-button
             type="success"
              size="mini"
            >分配权限</el-button>
            <el-button
              type="primary"
              size="mini"
              @click="handleEdit(scope.row)"
            >编辑</el-button>
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.row.id)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    
      <!-- 分页 -->
      <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :page-sizes="[2, 3, 4, 5]"
      :page-size="pageParams.pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
    </el-tab-pane>
    <el-tab-pane label="公司信息" name="second">配置管理</el-tab-pane>

      <!-- 新增编辑角色 dialog -->
    <el-dialog
      :title="isEdit ? '编辑角色' : '新增角色'"
      :visible.sync="addDialogVisible"
    >
      <setDia
        v-if="addDialogVisible"
        ref="addDiaFrom"
        :add-dialog-visible.sync="addDialogVisible"
        :is-edit="isEdit"
        :row="row"
        @loadAddDiaDep="diaDepartments"
      />
    </el-dialog>
  </el-tabs>
</template>

<script>
import { getRoles , deleteRole } from '@/api/setting'
import setDia from './setDia.vue'
export default {
  name: '',
  components: {
    setDia
  },
  data() {
    return {
      activeName: 'first',
      tableData: [],
      currentRow: null,
      pageParams: {
         page: 1, // 查询第一页
         pagesize: 2 // 每页两条  --- 要与pagination中page-size一致
       },
       total: 0 ,// 总的数据条数
       index: 1,
       addDialogVisible: false,
       isEdit:false,
       row:{}
    }
  },
  computed: {},
  created() {
    this.loadRoles()
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event)
    },
    handleEdit(index, row) {
      console.log(index, row)
    },
    handleDelete(id) {
    this.$confirm('此操作将永久删除该角色, 是否继续?', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(async () => {
      const res = await deleteRole(id).catch(e=>this.$message.error(e))
    console.log(res,111)
    // 1. 提示
    this.$message.success(res.data.message)
    // 2. 重新请求
    this.loadRoles()
    }).catch((err) => {
      console.log(err)
      this.$message({
        type: 'info',
        message: '已取消删除'
      })
    })
    },
    handleSizeChange(val) {
      this.index = 1
      this.pageParams.pagesize = val
      this.index += val * (this.pageParams.page-1)
      this.loadRoles()
      // console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.index = 1
      this.pageParams.page = val
      this.index += (val-1) * this.pageParams.pagesize
      this.loadRoles()
      // console.log(`当前页: ${val}`);
    },
    async loadRoles() {
        const res = await getRoles(this.pageParams)
        console.log(res)
        this.tableData = res.data.data.rows
        this.total = res.data.data.total
        console.log(this.total)
    },
    addSet () {
      this.addDialogVisible = true 
      this.isEdit = false 
    },
    handleEdit(row) {
      this.addDialogVisible = true 
      this.isEdit = true
      this.row = row 
    },
    diaDepartments () {
      this.$refs.addDiaFrom.hSuccess()
      this.addDialogVisible = false
      this.loadRoles()
    }
  }
}
</script>
<style lang="scss" scoped>
::v-deep .el-table__header th.is-leaf, ::v-deep .el-table__body td  {
  text-align: center;
}
</style>
